<template>
  <div style="text-align: center">
    <el-image
      style="width: 200px; height: 200px; margin-bottom: 20px"
      :src="userInfo.headimgurl"
      fit="cover"
    ></el-image>
    <el-descriptions class="margin-top" title="我的中心" :column="2" border>
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-attract"></i>
          unid
        </template>
        {{ userInfo.unid }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号名
        </template>
        {{ userInfo.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          vip等级
        </template>
        {{ userInfo.vipLevel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          vip到期时间
        </template>
        <el-tag size="small">{{ userInfo.vipExpires }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          昵称
        </template>
        {{ userInfo.nickname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ userInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-medal"></i>
          权限等级
        </template>
        {{ userInfo.roleName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-male"></i>
          <i class="el-icon-female"></i>
          性别
        </template>
        {{ userInfo.sex }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          省份
        </template>
        {{ userInfo.province }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          城市
        </template>
        {{ userInfo.city }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  id: "6",
  meta: {
    name: "我的中心",
    title: "wdzx",
    icon: "iconfont icon-wode",
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>
